<template>
  <div class="material-category" align="left">
    <div class="demo-nav">
      <div class="demo-nav__title">品类</div>
      <svg viewBox="0 0 1000 1000" class="demo-nav__back" @click="toBack">
        <path fill-rule="evenodd" fill="#969799" d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z"></path>
      </svg>
    </div>
    <div style="float: left">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item v-for="arr in categorys" :title="arr.categoryName" :key="arr.categoryId" @click="onChange(arr.categoryId)"/>
      </van-sidebar>
    </div>
    <div class="material-category-content">
      <div class="material-category-contents">
        <van-grid :gutter="13">
          <van-grid-item v-for="value in items" :key="value.categoryId" @click="categoryDetails(value.categoryId,value.categoryName)">
            <van-image :src="value.categoryImg" fit="cover" width="3.5rem" height="2.5rem"></van-image>
            <p style="font-size: 0.6rem;padding-top: 0.4rem">{{value.categoryName}}</p>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>

  import { Notify } from 'vant';
  import { getCateGoryList,getBuildingCategorys} from '@/api/commodity/shop_product.js'

  export default {
    name: "material_category",
    data() {
      return {
        fanid:'',
        activeKey: 0,
        categorys: [],
        items: [],
        categoryId :null,
        areaTest:''
      };
    },
    created() {
      // id为1表示为建房主材,id为2表示家居建材
      var id = parseInt(this.$route.query.materialId);
      this.areaTest = this.$route.query.areaTest

      this.distinguish(id);
    },
    methods: {
      onChange(index) {
        this.buildingCategorys(index);
      },
      toBack(){
        if (this.fanid == 0){
          this.$router.push({
            path:"/mainMaterial_index",
            query:{
              areaTest: this.areaTest
            }});
        }else{

          this.$router.push({
            path:"/buildingMaterial_index",
            query:{
              areaTest: this.areaTest
            }});
        }

        // localStorage.setItem('areaTest', this.areaTest)
        // this.$router.go(-1);
      },
      distinguish(id){
        this.fanid = id;
        // 建房主材
        if(id == 0){
          this.getMaterialList();
          // 家具建材
        }else if(id == 1){
          this.getBulidList();
        }
      },
      categoryDetails(id,name){
        this.$router.push({path:"/category_details",query:{categoryId :id,categoryName:name}});
      },
      // 查询建房主材类别列表
      getMaterialList(){
        getCateGoryList("0").then((res) => {
          this.categorys = res.data.data;
          this.categoryId = res.data.data[0].categoryId;
          this.buildingCategorys(this.categoryId);
        });
      },
      // 查询家居建材类别列表
      getBulidList(){
        getCateGoryList("1").then((res) => {
          this.categorys = res.data.data;
          this.categoryId = res.data.data[0].categoryId;
          this.buildingCategorys(this.categoryId);
        });
      },
      // 查询二级类别
      buildingCategorys(cateGoryId){
        getBuildingCategorys(cateGoryId).then((res) =>{
          console.log(res.data.data)
          this.items = res.data.data;
        })
      },
    },
  }
</script>

<style scoped>
  .demo-nav{
    position: relative;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    height: 45px;
    background-color: #fff;
    font-size: 1.1rem;
  }
  .demo-nav__back{
    position: absolute;
    top: 12px;
    left: 16px;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
  .material-category-content{
    margin-left: 80px;
    padding: 0.5rem;
  }

</style>
